<template>
   <div class="common-layout">
    <el-container>   
      <el-aside class="left">
        <div class="log"></div>    
          <!--
          active-text-color：激活菜单项的文本颜色
          background-color：菜单的背景颜色
          text-color：菜单项的文本颜色
          router：使用路由模式
            -->
        <el-menu active-text-color="#ffd04b" background-color="#00b158"  text-color="#fff" router>
          <!-- 
          index：路由地址
           -->
             <el-menu-item index="/shouye/fenglei">
                    <el-icon>
                        <Management />
                    </el-icon>
                    <span>文章分类</span>
                </el-menu-item>
                <el-menu-item index="/shouye/guanli">
                    <el-icon>
                        <Promotion />
                    </el-icon>
                    <span>文章管理</span>
                </el-menu-item>
                <el-sub-menu>
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>个人中心</span>
                    </template>
                    <el-menu-item index="/shouye/ziliao">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>基本资料</span>
                    </el-menu-item>
                    <el-menu-item index="/shouye/genghuan">
                        <el-icon>
                            <Crop />
                        </el-icon>
                        <span>更换头像</span>
                    </el-menu-item>
                    <el-menu-item index="/shouye/chongzhi">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>重置密码</span>
                    </el-menu-item>
                </el-sub-menu>

        </el-menu>
        </el-aside>
      <el-container>
        <el-header class="common-header">
          <div class="header-left">
            <p>管理员:
              <span v-if="user.nickname !== ''">{{ user.nickname }}</span>
              <span v-else>未命名</span>
            </p>
          </div>
          <div class="header-right">
            <el-dropdown>
              <span class="el-dropdown-link">
                <!-- 
                :size ：设置图标的大小
                :src ：头像地址
                class：设置头像的样式
                 -->
                <el-avatar :size="40" :src="user.user_pic || defaultAvatar" class="user-avatar" />
                <el-icon><SwitchButton /></el-icon>
                <el-icon><CaretBottom /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main class="main">
          <!-- 
          在当前页面下路由显示
           -->
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {
    Management,
    Promotion,
    UserFilled,
    User,
    Crop,
    EditPen,
    SwitchButton,
    CaretBottom
} from '@element-plus/icons-vue'
//导入 pinia 中 user.js 文件 获取 user.js 中 user 的值 赋值给 xx 
import{cuser} from '../stores/user.js'
// 引入 storeToRefs  pinia对象
import { storeToRefs } from "pinia"
// 引入路由
import { useRouter } from 'vue-router'
// 引入 element-plus 中的消息提示
import { ElMessage } from 'element-plus'
// 创建路由
const router = useRouter();
// 引入 onMounted  生命周期钩子
import { onMounted } from 'vue'
// 引入用户信息 的 pinia
const xx = cuser();
const { user } = storeToRefs(xx);
import {cs} from "../stores/zhuangtai.js";
const zt=cs()
// 退出登录
const logout = () => {
  xx.clearUser();
zt.clearzhuangtai()
  ElMessage({
    message: "退出成功",
    type: "success",
  });
  setTimeout(() => {
    xx.clearUser();
     router.push("/");  // 跳转到登录页或首页
  }, 1000);
 
}

onMounted(()=>{
  if(zt.zhuangtai==""){
    ElMessage({
      message: "请先登录",
      type: "warning",
    });
    router.push("/")
  }
})
</script>

<style lang="scss" scoped>
.common-layout{
   
    height: 100vh;
    .left{
        width: 200px;
        height: 100vh;
        background-color: #00b158;

        .log{
            width: 100%;
            height: 13%;
            background-image:url("../assets/logo.png");
            background-repeat: no-repeat;
            background-position: center;
        }
    }
     .common-header {
    height: 70px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }

  .header-right {
    display: flex;
    align-items: center;
  }

  .common-main {
    height: calc(100vh - 70px);
    background-color: rgb(243, 245, 242);
  }
  .custom-dropdown {
  border: none !important;
  box-shadow: none !important;

  .el-dropdown-menu {
    min-width: 160px !important; // 适当加大菜单宽度
    font-size: 16px !important;  // 调整字体大小
  }

  .el-dropdown-item {
    padding: 14px 22px !important; // 增加内边距，菜单更大
    font-weight: 500;
    outline: none !important; // 取消点击后的黑框
  }

  .el-dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.05); // 增加悬停效果
  }
   
    .main{
        height: 100vh;
    }


}

.el-dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px; // 头像与按钮之间的间距
}

.user-avatar {
  border: 2px solid #ddd; // 给头像加个边框
  border-radius: 50%; // 确保是圆形
}
/* 去掉 el-dropdown 触发按钮的黑框 */
.el-dropdown-link {
  outline: none !important;
  box-shadow: none !important;
}

/* 重点：防止鼠标悬停或点击后出现黑色边框 */
.el-dropdown:focus,
.el-dropdown:hover,
.el-dropdown:active {
  outline: none !important;
  box-shadow: none !important;
}
}
</style>